﻿@model LoginRegisterModel
@using SpotsHub.Gateway.Models.Customer;
@using Nop.Core;
@using Nop.Core.Infrastructure;
@using Nop.Core.Infrastructure.DependencyManagement;

@{
    Layout = "~/Views/Shared/_LoginLayout.cshtml";

    ViewBag.Title = T("PageTitle.Register").Text;
    // +string+

    //register URL with return URL (if specified)
    var registerUrl = Url.RouteUrl("Register");
    string url = null;
    if (!String.IsNullOrEmpty(this.Context.Request.QueryString["returnUrl"]))
    {
        url = this.Context.Request.QueryString["returnUrl"];
        var webHelper = EngineContext.Current.Resolve<IWebHelper>();
        registerUrl = webHelper.ModifyQueryString(registerUrl, "returnurl=" + HttpUtility.UrlEncode(this.Context.Request.QueryString["returnUrl"]), null);
    }
}

@if (Model.RegisterModel.RegisterModel.CountryEnabled && Model.RegisterModel.RegisterModel.StateProvinceEnabled)
{
    <script type="text/javascript">
        $(function () {
            $("#@Html.FieldIdFor(model => model.RegisterModel.RegisterModel.CountryId)").change(function () {
                var selectedItem = $(this).val();
                var ddlStates = $("#@Html.FieldIdFor(model => model.RegisterModel.RegisterModel.StateProvinceId)");
             var statesProgress = $("#states-loading-progress");
             statesProgress.show();
             $.ajax({
                 cache: false,
                 type: "GET",
                 url: "@(Url.RouteUrl("GetStatesByCountryId"))",
                    data: { "countryId": selectedItem, "addEmptyStateIfRequired": "false" },
                    success: function (data) {
                        ddlStates.html('');
                        $.each(data, function (id, option) {
                            ddlStates.append($('<option></option>').val(option.id).html(option.name));
                        });
                        statesProgress.hide();
                    },
                    error: function (xhr, ajaxOptions, thrownError) {
                        alert('Failed to retrieve states.');
                        statesProgress.hide();
                    }
                });
            });
        });
    </script>
}


<div class="login-wrapper @if (Model.IsRegister) {<text>hide</text>}">
    @Html.Partial("_Login", Model)
</div>

<div class="register-wrapper @if (!Model.IsRegister) {<text>hide</text>}">
    @Html.Partial("_Register", Model)
</div>

<script>
    $('.login-bottom a').click(function (e) {
        if ($('.login-wrapper .form-error-float').is(":visible")) {
            $('.login-wrapper .form-error-float:visible').fadeOut(function () {
                $('#login-main').css({ "overflow": "hidden" });
                $('.register-wrapper').css({ "left": -$('.login-wrapper').width() }).show().stop().animate({ "left": 0 });
                $('.login-wrapper').stop().animate({ "left": $('.login-wrapper').width() }, function () {
                    $('.login-wrapper').hide();
                    $('#login-main').css({ "overflow": "visible" });
                    $('.register-wrapper .form-error-float').each(function () {
                        if ($(this).find("span").hasClass("field-validation-error")) {
                            $(this).fadeIn();
                        }
                    });
                });
            });
        } else {
            $('#login-main').css({ "overflow": "hidden" });
            $('.register-wrapper').css({ "left": -$('.login-wrapper').width() }).show().stop().animate({ "left": 0 });
            $('.login-wrapper').stop().animate({ "left": $('.login-wrapper').width() }, function () {
                $('.login-wrapper').hide();
                $('#login-main').css({ "overflow": "visible" });
                $('.register-wrapper .form-error-float').each(function () {
                    if ($(this).find("span").hasClass("field-validation-error")) {
                        $(this).fadeIn();
                    }
                });
            });
        }
        e.preventDefault;
        return false;
    });
    $('.signup-bottom a').click(function (e) {
        if ($('.register-wrapper .form-error-float').is(":visible")) {
            $('.register-wrapper .form-error-float:visible').fadeOut(function () {
                $('#login-main').css({ "overflow": "hidden" });
                $('.login-wrapper').css({ "left": $('.register-wrapper').width() }).show().stop().animate({ "left": 0 });
                $('.register-wrapper').stop().animate({ "left": -$('.login-wrapper').width() }, function () {
                    $('.register-wrapper').hide();
                    $('#login-main').css({ "overflow": "visible" });
                    $('.login-wrapper input').each(function () {
                        if ($(this).hasClass("error")) {
                            $(this).prev(".form-error-float").fadeIn();
                        }
                    });
                });
            });
        } else {
            $('#login-main').css({ "overflow": "hidden" });
            $('.login-wrapper').css({ "left": $('.register-wrapper').width() }).show().stop().animate({ "left": 0 });
            $('.register-wrapper').stop().animate({ "left": -$('.login-wrapper').width() }, function () {
                $('.register-wrapper').hide();
                $('#login-main').css({ "overflow": "visible" });
                $('.login-wrapper input').each(function () {
                    if ($(this).hasClass("error")) {
                        $(this).prev(".form-error-float").fadeIn();
                    }
                });
            });
        }
        e.preventDefault;
        return false;
    });
    $('input.input-validation-error, input.error').focus(function () {
        if ($(this).prev('.form-error-float').length) {
            $(this).prev('.form-error-float').fadeOut();
        }
    });
    $(document).ready(function () {
        $('input.input-validation-error, input.error').each(function () {
            if ($(this).prev('.form-error-float').length) {
                $(this).prev('.form-error-float').css({ "left": $(this).position().left + 120 }).show();
            }
        });
    });
</script>